<template>
    <div id="goodTable_app">
        <el-table
        :data="goodsList"
        style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="first_cateid"
            label="一级分类"
            width="180">
        </el-table-column>
        <el-table-column
            prop="second_cateid"
            label="二级分类"
            width="180">
        </el-table-column>
        <el-table-column
            prop="goodsname"
            label="商品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="img"
            label="商品图片"
            width="180" v-slot="props">
            <template>
                <img class="goodImg" :src="'http://127.0.0.1:3000/'+props.row.img">
            </template>    
        </el-table-column>
        <el-table-column
            prop="price"
            label="零售价格"
            width="180" v-slot="props">
            <template>
                &yen; {{ props.row.price }}
            </template>
        </el-table-column>
        <el-table-column
            prop="market_price"
            label="市场价格"
            width="180"  v-slot="props">
            <template>
                &yen; {{ props.row.market_price }}
            </template>
        </el-table-column>
        <el-table-column
            prop="isnew"
            label="是否新品"
            width="180" v-slot="props">
            <template>
                <el-tooltip :content="props.row.isnew == 1?'是':'否'" placement="top">
                    <el-switch
                        v-model="props.row.isnew"
                        active-color="#409EFF"
                        inactive-color="#EEE"
                        :active-value="1"
                        inactive-value="0">
                    </el-switch>
                </el-tooltip>
            </template>    
        </el-table-column>
        <el-table-column
            prop="ishot"
            label="是否热卖"
            width="180" v-slot="props">
            <template>
                <el-tooltip :content="props.row.ishot == 1?'是':'否'" placement="top">
                    <el-switch
                        v-model="props.row.ishot"
                        active-color="#409EFF"
                        inactive-color="#EEE"
                        :active-value="1"
                        inactive-value="0">
                    </el-switch>
                </el-tooltip>
            </template>  
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            fixed="right"
            width="180" v-slot="props">
            <template>
                <el-button v-if="props.row.status == 1" type="success" size="mini" plain>正常</el-button>
                <el-button v-else type="danger" size="mini" plain>禁用</el-button>
            </template>    
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="180" v-slot="props">
            <template>
            <el-button @click="update_goods(props.row)" type="success" size="mini" icon="el-icon-edit" circle></el-button>
            <el-button @click="delGoods(props.row.id)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination
        background
        layout="prev, pager, next"
        :page-size="size"
        :total="goodsCount"
        @current-change="changePage"
        >
        </el-pagination>
    </div>
</template>

<script>
import vm from '../../vm/vm'
export default {
    props: ["page","size","goodsList","goodsCount"],
    methods: {
        update_goods(raw){
            vm.$emit("update_goods_brother",raw)
        },
        delGoods(id){
            this.$http.post("/goodsdelete",{id:id}).then(
                res=>{
                    if(res.status == 200){
                        this.$emit("updateGoods")
                    }
                }
            )
        },
        changePage(page){
            this.$emit("changePage",page)
        } 
    },
    data() {
        return {
        }
      }
}
</script>

<style>
.goodImg{
    width: 100px;
}
</style>